<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
        label="Logo"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="index.php/?s=App.Examples_Upload.Go"
            :before-upload="beforeUpload"
            @change="handleLogoChange"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item
          label="系统标题"
          extra="系统标题"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input
            v-decorator="[
              'title',
              { initialValue:  InitialValue.title},
              {rules: [{ required: true, message: $t('form.basic-form.title.required') }]}
            ]"
            name="title"
            placeholder="系统标题 (必填)" />
        </a-form-item>
        <a-form-item
          label="ICP备案号"
          extra="ICP"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
          <a-input
            v-decorator="[
              'ICP',
              { initialValue:  InitialValue.ICP},
              {rules: [{ required: true, message: $t('form.basic-form.title.required') }]}
            ]"
            name="ICP"
            placeholder="请输入ICP (必填)" />
        </a-form-item>
        <a-form-item
          label="MCH_CERT"
          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
          :required="false"
          
        >
        <a-upload
          name="file"
          :multiple="true"
          action="index.php/?s=App.Examples_Upload.Go"
          :headers="headers"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" /> 上传 KEY 证书</a-button>
        </a-upload>

        <a-upload
          name="file"
          :multiple="true"
          action="index.php/?s=App.Examples_Upload.Go"
          :headers="headers"
          @change="handleCertChange"
        >
          <a-button> <a-icon type="upload" /> 上传 CERT 证书 </a-button>
        </a-upload>
        </a-form-item>
        <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
        >
          <a-button htmlType="submit" type="primary" v-action:setsystem_add2>提交</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
import { Setting,GetConfig } from '../../../api/setsystem'
export default {    
  name: 'setsystem',
  components: {
  },
  data () {
    return {
      // 获取接口数据
      InitialValue: [],
      // 富文本
      contract: '',
      loading: false,
      // loadings: false,
      imageUrl: '',
      // 二维码
      // imageUrlCode: '',
       headers: {
        authorization: 'authorization-text',
      },
      // 富文本
      allContent: '',
      form: this.$form.createForm(this),
      logoScource: '',
      qrCode: '',
      fileScource: '',
      certFileScource: ''
    }
  },
  created () {
    GetConfig().then(res => {
        console.log('------------------res-------------', res)
        this.InitialValue = res.data.value
        this.imageUrl = this.InitialValue.logo
    })
  },
  methods: {
    // cert file
    handleCertChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
        this.certFileScource = info.file.response.data.url
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    // file
    handleChange(info) {
      
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
        this.fileScource = info.file.response.data.url
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
      console.log('-----------fileScourse-----------------', this.fileScource)
    },
    // logo
    handleLogoChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          console.log('--------------logo---------------', imageUrl)
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          // 海报
          // values.poster = this.imageUrlPoster
          // 头像
          if(this.imageUrl !== '') {
            values.logo = this.imageUrl
            console.log('------------this.logoScource------------', this.imageUrl)
            // key 证书
            values.key = this.fileScource
            // cert 证书
            values.cert = this.certFileScource
            console.log('Received values of form: ', values)
            Setting(values).then(res => {
              this.$message.success('保存成功')
              this.form.resetFields()
              location.reload();
            })
          } else {
            this.$message.info('更改数据后图片必须重新上传')
          }
        }
      })
    }
  }
}
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.avatar-uploader > .ant-upload {
  width: 102px;
  height: 102px;
}
.avatar-uploader img {
  width: 102px;
  height: 102px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
